import React, { useState } from 'react';
import { Steps, Result, Button, Table, Row, Col, message } from 'antd';
import { IconFont } from '../../../../components/IconFont';
import services from '../../../../services/api';
import '../operator.less';
const { Step } = Steps;
const creatHistory = require('history').createHashHistory
const history = creatHistory();

export default function(props) {
  const [current, setCurrent] = useState(0);
  const {columns, data, remarks, remarkColumns, actionType, des, exportParams, isExportHandle} = props
  const steps = [
    {
      title: '确认导出数据'
    },
    {
      title: '导出到文件'
    }
  ];
  const nameList = {
    template: '策略模板',
    policy: '策略',
    strategyComponent:'组件'
  }
  //导出
  function exportNow() {
    if (isExportHandle) {
      props.exportPage && props.exportPage(exportParams)
      setCurrent(1)
      return;
    };
    services[actionType].exportHandle(exportParams).then(res => {
      if (res.code) {
        message.warning(res.msg)
      } else {
       props.exportPage && props.exportPage(exportParams)
       setCurrent(1)
      }
    })
  };
  // 返回上一级
  function goback() {
    history.goBack()
  };
  return (
    <div className='strategy-operater-wp'>
      <div className='strategy-operater-hd'>
        <Row type='flex' justify='center'>
          <Col span={12}>
            <Steps current={current}>
              {steps.map(item => (
                <Step key={item.title} title={item.title} />
              ))}
            </Steps>
          </Col>
        </Row>
      </div>
      {current === 0 && (
        <>
          <div className='strategy-operater-content'>
            <p>
              请确认您要导出的数据:
            </p>
            <Table
              className='strategy-operater-table'
              dataSource={data}
              columns={columns}
              rowKey='name'
              pagination={false}
            />
          </div>
          {remarks.length > 0 && (<div className='strategy-remarks-content'>
            <p>
               导出内容中包含的内部名单、模型数据、外部数据在导入使用时，请提前初始化相关数据:
            </p>
            <Table
              className='strategy-operater-table'
              dataSource={remarks}
              columns={remarkColumns}
              rowKey='name'
              pagination={false}
            />
          </div>)}
          <div className='strategy-operater-ft'>
            <Row type='flex' justify='center'>
              <Col span={12} style={{ textAlign: 'center' }}>
                <Button type='primary' onClick={() => exportNow()}>
                  导出
                </Button>
              </Col>
            </Row>
            <p>{des || '系统会自动将策略使用的指标、字段一并导出'}</p>
          </div>
        </>
      )}
      {current === 1 && (
        <>
          <div className='strategy-operater-content'>
            <div className='strategy-export-success'>
              <Result
                icon={<IconFont type='iconsuccess-' style={{ fontSize: '42px', fontWeight: 'normal' }} />}
                title='导出成功'
                subTitle={`本次共导出${data.length}条${nameList[actionType]}`}
              />
              <Row type='flex' justify='center'>
                <Col span={12} style={{ textAlign: 'center' }}>
                  <Button type='primary' onClick={() => goback()}>
                    确定
                  </Button>
                </Col>
              </Row>
            </div>
            <Table
              className='strategy-operater-table'
              dataSource={data}
              columns={columns}
              rowKey='name'
              pagination={false}
            />
          </div>
          <div className='strategy-operater-ft'></div>
        </>
      )}
    </div>
  );
}
